<template>
    <div class="header-wrapper">
      <div class="logo-container">
        <span class="logo-text">图书管理系统</span>
      </div>
      <div class="right-menu">
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <img :src="image" class="user-avatar" />
            <span class="user-name">管理员</span>
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <router-link to="/">
              <el-dropdown-item>首页</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click.native="logout">
              <span style="display:block;">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "HeaderView",
    data() {
      // 从 localStorage 中获取 userInfo 字符串
      let userInfo = localStorage.getItem('userInfo');
      // 解析字符串为对象，并处理 userInfo 为 null 的情况
      userInfo = userInfo ? JSON.parse(userInfo) : {};
      return {
        image: userInfo.image,
      };
    },
    methods: {
      logout() {
        this.$confirm("确定退出系统吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          // 这里添加退出登录逻辑
          this.$router.push("/login");
        });
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .header-wrapper {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  
    .logo-container {
      display: flex;
      align-items: center;
  
      .logo-text {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        margin-left: 10px;
      }
    }
  
    .right-menu {
      height: 100%;
      display: flex;
      align-items: center;
  
      &:focus {
        outline: none;
      }
  
      .avatar-container {
        margin-right: 30px;
        cursor: pointer;
  
        .avatar-wrapper {
          display: flex;
          align-items: center;
  
          .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 8px;
          }
  
          .user-name {
            color: #fff;
            margin-right: 5px;
          }
  
          .el-icon-caret-bottom {
            color: #fff;
            font-size: 12px;
          }
        }
      }
    }
  }
  
  .user-dropdown {
    top: 50px !important;
  }
  </style>